import React, { useState } from "react";
import { Col, Row, Input } from "antd";
import Comp1 from "./Comp1";
import Comp2 from "./Comp2";
import "./redux.scss";
import PageHead from "@/components/PageHead";
const ReduxCommunication: React.FC = () => {
  // 父传子
  const [value1, UseValue1] = useState("");
  const value1Change = (e: any) => {
    UseValue1(e.target.value);
  };
  // 子传父
  const [value2, setValue2] = useState("");
  const [value4, setValue4] = useState("");
  const valueChange = (data: string, flog: Boolean) => {
    flog ? setValue4(data) : setValue2(data);
  };

  return (
    <div>
      <PageHead title="组件通信"></PageHead>
      <Row gutter={24}>
        <Col span={12}>
          <div className="title">一、父传子</div>
          <Input
            value={value1}
            onChange={value1Change}
            placeholder="输入内容，改变子组件的值"
          />
          <Comp1 value1={value1}></Comp1>
        </Col>
        <Col span={12}>
          <div className="title">二、子传父</div>
          <div style={{ background: "#EEE", marginBottom: "12px" }}>
            父组件：<span>{value2}</span>
          </div>
          <Comp2 valueChange={valueChange}></Comp2>
        </Col>
      </Row>
      <Row gutter={24} style={{ marginTop: "56px" }}>
        <Col span={12}>
          <div className="title">三、context 侉跨组件传参</div>
          <Input
            value={value1}
            onChange={value1Change}
            placeholder="输入内容，改变子组件的值"
          />
          <Comp1 value1={value1}></Comp1>
        </Col>
        <Col span={12}>
          <div className="title">四、redux 状态管理器</div>
          <div style={{ background: "#EEE", marginBottom: "12px" }}>
            组件一：<span>{value4}</span>
          </div>
          <Comp2 valueChange={valueChange}>
            <span style={{ width: "64px" }}>组件二：</span>
          </Comp2>
        </Col>
      </Row>
    </div>
  );
};

export default ReduxCommunication;
